<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #div {
        width: 100px;
        height: 100px;
        background-color: green;
      }
      #outer {
        width: 60px;
        height: 60px;
        background-color: red;
      }
      #inner {
        width: 30px;
        height: 30px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div id="div">
      <div id="outer">
        <div id="inner"></div>
      </div>
    </div>
    <script>
      // console.log("1");
      // setTimeout(function(){
      //     console.log('2');
      //     Promise.resolve().then(()=>{
      //         console.log('3');
      //     })
      // })

      // Promise.resolve().then(()=>{
      //     console.log('4');
      // })
      // console.log("5");

      // 1 5 4 2 3

      // ==============
      let o = {
        a: 1,
        b: 2,
      };
      console.dir(o);
      console.log("o的valueOf", o.valueOf());

      console.log([1, 2, 3].toString());
      console.log(Number({}));
      console.log(Boolean([]));
      console.log([].valueOf());
      console.log([] == ![]); // true
      /*
            == 倾向于将两边转换成Number来进行比较
            [] == !Boolean([])
            [] == !true
            [] == false
            [].valueOf() == false
            [] == false
            [].toString == false
            '' == false
            Number('') == Number(false)
            0 == 0
            true
        */

      const div1 = document.getElementById("div");
      const outer = document.getElementById("outer");
      const inner = document.getElementById("inner");
      console.dir(div1);

      // div1.addEventListener('click', function(){
      //    console.log('green');
      // },true)

      // outer.addEventListener('click', function(){
      //    console.log('red');
      // })

      // inner.addEventListener('click', function(){
      //    console.log('black');
      // })

      // ==================

      div1.addEventListener("click", function () {
        console.log("green");
      });

      outer.addEventListener("click", function () {
        console.log("red");
      });

      inner.addEventListener("click", function (event) {
        //    event.stopPropagation()  // 用于阻止事件冒泡的机制
        event.stopImmediatePropagation(); // 用于阻止事件冒泡和该对象上的其他事件的执行
        console.log("black");
      });

      inner.addEventListener("click", function (event) {
        //    event.stopPropagation()  // 用于阻止事件冒泡的机制
        //    event.stopImmediatePropagation()
        console.log("baladfafaefwa");
      });

      var close = 3;
      function closeFn() {
        console.log(close);
      }

      // ============
      var result = [];
      var a = 3;
      var total = 0;

      function foo(a) {
        for (var i = 0; i < 3; i++) {
          result[i] = function () {
            total += i * a;
            console.log(total);
          };
        }
      }

      foo(1);
      result[0](); // 3
      result[1](); // 6
      result[2](); // 9

      console.log(undefined == null);
      console.log(Boolean(NaN));
    </script>
  </body>
</html>
